<template>
  <div class="action-area">
    <!-- 上传组件 -->
    <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :headers="headers"
        name="file"
    >
      <el-image v-if="imageUrl" :src="imageUrl" class="avatar"></el-image>
<!--      <el-empty v-else class="avatar-uploader-icon"-->
<!--          image="http://sp6zi9loh.hn-bkt.clouddn.com/3426fa2dad9c416d9e275730dcb3acae.jpg"-->
<!--      />-->
      <el-icon :size="100" v-else class="avatar-uploader-icon">
        <Plus/>
      </el-icon>
    </el-upload>
  </div>
</template>

<script setup>
import {ref, defineProps,defineEmits,watchEffect} from 'vue'
import {ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'


const emit=defineEmits()
const props = defineProps({
  dbImage: String
})

// 状态变量
const uploadUrl = 'http://localhost:8080/upload/images'
const imageUrl = ref('')
// 使用 watchEffect 监听 props.dbImage 的变化
watchEffect(() => {
  if (props.dbImage) {
    imageUrl.value = props.dbImage;
  }
});

const currentImage = ref('') // 当前展示的图片
const headers = {
  // 如果需要认证，在这里添加
  // 'Authorization': 'Bearer ' + localStorage.getItem('token')
}

// 上传成功的回调
const handleAvatarSuccess = (response) => {
  console.log('上传响应：', response)
  imageUrl.value = response
  currentImage.value = response
  emit('success',response)
  ElMessage.success('上传成功')
}

// 上传前的验证
const beforeAvatarUpload = (file) => {
  const acceptTypes = ['image/jpeg', 'image/png', 'image/gif']
  const isValidType = acceptTypes.includes(file.type)
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isValidType) {
    ElMessage.error('只能上传 JPG/PNG/GIF 格式的图片!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }

  return true
}

// 暴露方法给父组件
defineExpose({
  clearImageUrl:()=>imageUrl.value=''
})
</script>

<style scoped>
.action-area {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 宽度占满父元素宽度 */
  height: 100%; /* 高度占满父元素高度 */
}

.avatar-uploader {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 宽度占满父元素宽度 */
  height: 100%; /* 高度占满父元素高度 */
}

.avatar-uploader-icon {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 宽度占满父元素宽度 */
  height: 100%; /* 高度占满父元素高度 */
}

.avatar {
  width: 100%; /* 宽度占满父元素宽度 */
  height: auto; /* 高度自适应 */
}
</style>